<head>
    <title>prepare</title>
    <link rel="stylesheet" rev="stylesheet" href="static/css/all.css" type="text/css" media="all">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css">
    <script type="text/javascript" src="static/js/jquery.js"></script>
    <script type="text/javascript" src="static/js/bootstrap.js"></script>
</head>

<body class="bg">

<?php session_start();

    include("include/header.php");
    include ("include/util.inc.php");

    $LEVELS = ["easy","medium","hard"];
    $CATEGORYS = $PDO->query("SELECT cname FROM category");
    $SIZES = [5,10,15];
    $SIZE_NAMES = ["short","medium","long"];

?>
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">PREPARE</h5></div>
        <div class="modal-body">
            <div class="mb-3 row">
                <label for="staticEmail" class="col-sm-2 offset-sm-1 col-form-label">category</label>
                <div class="col-sm-6 offset-sm-1" id="categorydiv">
                    <select class="form-select" id="category">
                        <?php
                        foreach ($CATEGORYS  as $CATEGORY){
                            ?>
                            <option value="<?=$CATEGORY["cname"]?>"><?=$CATEGORY["cname"]?></option>
                            <?php
                        }
                        ?>
                        <option value="random">random</option>
                    </select>
                </div>
            </div>
            <div class="mb-3 row">
                <label for="staticEmail" class="col-sm-2 offset-sm-1 col-form-label">level</label>
                <div class="col-sm-6 offset-sm-1">
                    <select class="form-select" id="level">
                        <?php
                        foreach ($LEVELS  as $LEVEL){
                            ?>
                            <option value="<?=$LEVEL?>"><?=$LEVEL?></option>
                            <?php
                        }
                        ?>
                        <option value="random">random</option>
                    </select>
                </div>
            </div>

            <div class="mb-3 row">
                <label for="staticEmail" class="col-sm-2 offset-sm-1 col-form-label">size</label>
                <div class="col-sm-6 offset-sm-1">
                    <select class="form-select" id="size">
                        <?php
                        for($i = 0; $i < count($SIZES);$i = $i + 1){
                            ?>
                            <option value="<?=$SIZES[$i]?>"><?=$SIZE_NAMES[$i]?></option>
                            <?php
                        }
                        ?>
                    </select>
                </div>
            </div>
            <div class="mb-3 row">
                <label for="staticEmail" class="col-sm-2 offset-sm-1 col-form-label">mode</label>
                <div class="col-sm-6 offset-sm-1 btn-group" role="group" aria-label="Basic radio toggle button group">
                    <input type="radio" class="btn-check mode" name="mode" id="btnradio1" autocomplete="off" checked value="time">
                    <label class="btn btn-outline-primary" for="btnradio1">Timed</label>

                    <input type="radio" class="btn-check mode" name="mode" id="btnradio2" autocomplete="off" value="normal">
                    <label class="btn btn-outline-primary" for="btnradio2">Normal</label>


                </div>

            </div>
            <div class="mb-3 row">
                <label for="staticEmail" class="col-sm-2 offset-sm-1 col-form-label"></label>
                <div class="col-sm-6 offset-sm-1 btn-group" role="group" aria-label="Basic radio toggle button group">
                    <input type="radio" class="btn-check mode2" name="mode2"  autocomplete="off" checked value="public" id="public-mode">
                    <label class="btn btn-outline-primary" for="public-mode">public only</label>
                    <input type="radio" class="btn-check mode2" name="mode2"  autocomplete="off" checked value="private" id="private-mode">
                    <label class="btn btn-outline-primary" for="private-mode">private only</label>
                    <input type="radio" class="btn-check mode2" name="mode2"  autocomplete="off" value="mixed" id="mixed-mode">
                    <label class="btn btn-outline-primary" for="mixed-mode">mixed</label>


                </div>

            </div>
            <div class="mb-3 row">
                <label for="staticEmail" class="col-sm-2 offset-sm-1 col-form-label">time</label>
                <div class="col-sm-6 offset-sm-1 btn-group" role="group" aria-label="Basic radio toggle button group">
                    <div class="input-group flex-nowrap">
                        <input type="text" class="form-control" aria-describedby="addon-wrapping" id="countdown" onblur="check_value(this)">
                        <span class="input-group-text" id="addon-wrapping">seconds</span>
                    </div>

                </div>

            </div>




            </div>
        <div class="modal-footer ">
            <button type="button" class="btn btn-success text-center" onclick="click_at()">Start Quiz!</button>
        </div>


        </div>

    </div>



</body>
<script type="text/javascript" src="static/js/prepare.js"></script>
